<template>
  <el-dialog v-model="model" @close="resetPwdForm">
    <el-form
      ref="passwordFormRef"
      :model="pwdForm"
      :rules="passwordRules"
      label-width="140px"
    >
      <el-form-item :label="$t('password.newPwd')" prop="pwd">
        <el-input
          v-model="pwdForm.pwd"
          type="password"
          clearable
          :placeholder="$t('password.newPwdRequired')"
          show-password
        />
      </el-form-item>
      <el-form-item :label="$t('password.confirmPwd')" prop="repeatPwd">
        <el-input
          v-model="pwdForm.repeatPwd"
          type="password"
          clearable
          :placeholder="$t('password.confirmPwdRequired')"
          show-password
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetPwdForm">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" @click="submitPwdForm">
          {{ $t("common.confirm") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { type FormInstance, type FormRules } from "element-plus";
import type { UserResetPwdReq } from "@/api/system/user/types";
import { userApi } from "@/api/system/user/index";
const passwordFormRef = ref<FormInstance>();
const model = defineModel<boolean>();
// 接受父组件传过来的参
const props = defineProps({
  entityKey: {
    type: Object,
    default: () => {},
  },
});
// 重置密码
let pwdForm: UserResetPwdReq = reactive({
  userId: "",
  pwd: "",
  repeatPwd: "",
});
const confirmPwdValidate = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error(t("password.confirmPwdRequired")));
  } else if (value !== pwdForm.pwd) {
    callback(new Error(t("password.comparePwd")));
  } else {
    callback();
  }
};

const pwdValidate = (rule: any, value: any, callback: any) => {
  const ISPWD =
    /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%?^&*,\._\+(){}])[0-9a-zA-Z!@#$%?^&*,\\._\+(){}]{8,20}$/; // eslint-disable-line
  if (value === "") {
    callback(new Error(t("password.newPwdRequired")));
  } else if (!ISPWD.test(value)) {
    callback(new Error(t("password.pwdRules")));
  } else {
    callback();
  }
};

// 重置密码校验
const passwordRules = reactive<FormRules<UserResetPwdReq>>({
  pwd: [{ required: true, validator: pwdValidate, trigger: "blur" }],
  repeatPwd: [
    { required: true, validator: confirmPwdValidate, trigger: "blur" },
  ],
});
const emits = defineEmits(["refresh"]);
function resetPwdForm() {
  passwordFormRef.value?.resetFields();
  if (model.value) {
    model.value = false;
  }
}
const submitPwdForm = async () => {
  await passwordFormRef.value?.validate((valid) => {
    if (valid) {
      pwdForm.userId = props.entityKey.userId;
      userApi.resetpwd(pwdForm).then((response) => {
        if (response.status === 200) {
          ElMessage({
            message: t("password.successResetPwd"),
            type: "success",
          });
          if (model.value) {
            model.value = false;
          }
          emits("refresh", response.status === 200);
        }
      });
    } else {
      return Promise.reject();
    }
  });
};
</script>
